<template>
  <div style="width: 100%; height: 100%;">
    <div
    class="ScreenAdapter"
    :style="style">
    <slot />
  </div>
  </div>
</template>

<script>

export default {
  name: "newScreenAdapter",
  props: {
    width: {
      type: String,
      default: '1920' //1920 1080
    },
    height: {
      type: String,
      default: '1080' //1280 720
    }
  },
  components: {

  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      const w = window.innerWidth / this.width
      const h = window.innerHeight / this.height
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
    }
  },
  created() {
    
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .ScreenAdapter {
    transform-origin: left top;
    position: fixed;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    // background: oldlace;
  }
</style>